<template>
  <div class="bg-white sticky top-0 left-0 w-full z-10">
    <ul
      class="
        w-[800px]
        relative
        flex flex-wrap
        justify-center
        overflow-x-auto
        px-[10px]
        py-1
        text-xs text-zinc-600
        duration-300
        overflow-hidden
        mx-auto
      "
      :class="[isOpenCategory ? 'h-[206px]' : 'h-[56px]']"
    >
      <div
        @click="triggerState"
        class="
          absolute
          right-0
          bottom-1
          z-20
          p-1
          rounded
          cursor-pointer
          duration-200
          hover:bg-zinc-200
        "
      >
        <x-svg-icon
          :name="isOpenCategory ? 'fold' : 'unfold'"
          class="w-1 h-1"
          fillClass="fill-zinc-900"
        >
        </x-svg-icon>
      </div>
      <li
        v-for="(item, index) in $store.getters.category"
        :key="item.id"
        @click="onItemClick(index)"
        :class="[index == curren ? 'bg-zinc-200' : '']"
        class="
          shrink-0
          px-1.5
          py-0
          z-10
          duration-200
          text-zinc-900 text-base
          font-bold
          h-4
          leading-4
          cursor-pointer
          hover:bg-zinc-200
          rounded
          mr-1
          mb-1
        "
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue-demi";

const isOpenCategory = ref(false);
const triggerState = () => {
  isOpenCategory.value = !isOpenCategory.value;
};
const curren = ref(0);
const onItemClick = (index) => {
  curren.value = index;
};
</script>

<style>
</style>